<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>CSS选择器 | 学习笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        <meta name="author" content="Jiesen">
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    
    <link rel="prev" href="../CSS/CSS简介.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="3.1"
        data-chapter-title="CSS选择器"
        data-filepath="CSS/CSS选择器.md"
        data-basepath=".."
        data-revision="Sun Sep 23 2018 15:52:51 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="HTML/HTML.html">
            
                
                    <a href="../HTML/HTML.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        HTML
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="HTML/html简介.html">
            
                
                    <a href="../HTML/html简介.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        html简介
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="HTML/a链接.html">
            
                
                    <a href="../HTML/a链接.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        a链接
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="HTML/标签.html">
            
                
                    <a href="../HTML/标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        标签
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="HTML/img.html">
            
                
                    <a href="../HTML/img.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        img
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="HTML/列表.html">
            
                
                    <a href="../HTML/列表.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.5.</b>
                        
                        列表
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="HTML/form表单.html">
            
                
                    <a href="../HTML/form表单.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.6.</b>
                        
                        form表单
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="HTML/常用from表单类型.html">
            
                
                    <a href="../HTML/常用from表单类型.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.7.</b>
                        
                        常用from表单类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="HTML/tabel表格.html">
            
                
                    <a href="../HTML/tabel表格.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.8.</b>
                        
                        tabel表格
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" data-path="HTML5/HTML5新增元素.html">
            
                
                    <a href="../HTML5/HTML5新增元素.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        HTML5新增元素
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" data-path="HTML5/audio和vedio元素.html">
            
                
                    <a href="../HTML5/audio和vedio元素.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        audio和vedio元素
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" data-path="HTML5/iframe标签.html">
            
                
                    <a href="../HTML5/iframe标签.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        iframe标签
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3" data-path="CSS/CSS简介.html">
            
                
                    <a href="../CSS/CSS简介.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        CSS简介
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter active" data-level="3.1" data-path="CSS/CSS选择器.html">
            
                
                    <a href="../CSS/CSS选择器.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        CSS选择器
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >学习笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="css&#x9009;&#x62E9;&#x5668;">CSS&#x9009;&#x62E9;&#x5668;</h1>
<h2 id="css&#x9009;&#x62E9;&#x5668;&#x7684;&#x5206;&#x7C7B;&#x6709;">CSS&#x9009;&#x62E9;&#x5668;&#x7684;&#x5206;&#x7C7B;&#x6709;</h2>
<p>CSS&#x62E5;&#x6709;&#x4E00;&#x4E2A;&#x975E;&#x5E38;&#x5F3A;&#x5927;&#x7684;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x91CC;&#x9762;&#x63D0;&#x4F9B;&#x4E86;&#x975E;&#x5E38;&#x4E30;&#x5BCC;&#x7684;&#x9009;&#x62E9;&#x7B26;&#xFF0C;&#x51E0;&#x4E4E;&#x53EF;&#x4EE5;&#x9009;&#x4E2D;&#x9875;&#x9762;&#x91CC;&#x4EFB;&#x4F55;&#x7684;&#x5143;&#x7D20;&#x3002;
&#x5E38;&#x7528;&#x7684;&#x9009;&#x62E9;&#x7B26;&#x5206;&#x4E3A;&#x4EE5;&#x4E0B;&#x516B;&#x5927;&#x7C7B;&#xFF1A;</p>
<h3 id="&#x4E00;&#x3001;&#x901A;&#x914D;&#x9009;&#x62E9;&#x7B26;">&#x4E00;&#x3001;&#x901A;&#x914D;&#x9009;&#x62E9;&#x7B26;</h3>
<p>1.&#x901A;&#x914D;&#x9009;&#x62E9;&#x7B26; *</p>
<pre><code>* &#x53F7;&#x8868;&#x793A;&#x6240;&#x6709;&#x7684;&#x5BF9;&#x8C61;

&#x6240;&#x8C13;&#x901A;&#x914D;&#x9009;&#x62E9;&#x7B26;&#xFF0C;&#x5C31;&#x662F;&#x6307;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6A21;&#x7CCA;&#x6307;&#x5B9A;&#x7684;&#x65B9;&#x5F0F;&#x6765;&#x5BF9;&#x5BF9;&#x8C61;&#x8FDB;&#x884C;&#x9009;&#x62E9;&#xFF0C;&#x6307;&#x5B9A;&#x6837;&#x5F0F;&#x3002;

&#x4F8B;&#xFF1A;

* {
  color:blue;
  margin:0;
  padding:0;
}    
</code></pre><h3 id="&#x4E8C;&#x3001;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;">&#x4E8C;&#x3001;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;</h3>
<p>2.&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;</p>
<p>&#x6240;&#x8C13;&#x5143;&#x7D20;&#x9009;&#x62E9;&#x7B26;&#xFF0C;&#x6307;&#x4EE5;&#x7F51;&#x9875;&#x4E2D;&#x5DF2;&#x6709;&#x7684;&#x6807;&#x7B7E;&#x540D;&#x4F5C;&#x4E3A;&#x540D;&#x79F0;&#x7684;&#x9009;&#x62E9;&#x7B26;&#x3002;</p>
<pre><code>&#x4F8B;&#xFF1A;

    body {}

    h1 {}

    p {}
</code></pre><h3 id="&#x4E09;&#x3001;&#x7FA4;&#x7EC4;&#x9009;&#x62E9;&#x7B26;">&#x4E09;&#x3001;&#x7FA4;&#x7EC4;&#x9009;&#x62E9;&#x7B26;</h3>
<p>3.&#x7FA4;&#x7EC4;&#x9009;&#x62E9;&#x7B26;</p>
<pre><code>&#x9664;&#x4E86;&#x53EF;&#x4EE5;&#x5BF9;&#x5355;&#x4E2A;&#x6807;&#x7B7E;&#x8FDB;&#x884C;&#x6837;&#x5F0F;&#x6307;&#x5B9A;&#x5916;&#xFF0C;&#x8FD8;&#x53EF;&#x4EE5;&#x5BF9;&#x4E00;&#x7EC4;&#x6807;&#x7B7E;&#x8FDB;&#x884C;&#x76F8;&#x540C;&#x7684;&#x6837;&#x5F0F;&#x5B9A;&#x4E49;&#x3002;

&#x4F8B;&#xFF1A;

    h1,h2, h3, p {
       font-size:12px;
       font-family:arial;
    }

&#x4F7F;&#x7528;&#x9017;&#x53F7;&#x5BF9;&#x9009;&#x62E9;&#x7B26;&#x8FDB;&#x884C;&#x5206;&#x9694;&#x3002;&#x5BF9;&#x9875;&#x9762;&#x4E2D;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x76F8;&#x540C;&#x6837;&#x5F0F;&#x7684;&#x5730;&#x65B9;&#xFF0C;&#x53EA;&#x9700;&#x5199;&#x4E00;&#x6B21;&#x6837;&#x5F0F;&#x3002;
</code></pre><h3 id="&#x56DB;&#x3001;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x7B26;">&#x56DB;&#x3001;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x7B26;</h3>
<ol>
<li>&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x7B26;
&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x7B26;&#x53EF;&#x4EE5;&#x5206;&#x4E3A;
|&#x9009;&#x62E9;&#x7B26;|&#x540D;&#x79F0;|&#x63CF;&#x8FF0;|
|-----|-----:|
|E F|&#x5305;&#x542B;&#x9009;&#x62E9;&#x7B26;|&#x9009;&#x62E9;&#x6240;&#x6709;&#x88AB;E&#x5143;&#x7D20;&#x5305;&#x542B;&#x7684;F&#x5143;&#x7D20;|
|E&gt;F|&#x5B50;&#x9009;&#x62E9;&#x7B26;|&#x9009;&#x62E9;&#x6240;&#x6709;&#x4F5C;&#x4E3A;E&#x5143;&#x7D20;&#x7684;&#x5B50;&#x5143;&#x7D20;F|
|E+F|&#x76F8;&#x90BB;&#x9009;&#x62E9;&#x7B26; |&#x9009;&#x62E9;&#x7D27;&#x8D34;&#x5728;E&#x5143;&#x7D20;&#x4E4B;&#x540E;F&#x5143;&#x7D20;|
|E~F|&#x5144;&#x5F1F;&#x9009;&#x62E9;&#x7B26;|&#x9009;&#x62E9;E&#x5143;&#x7D20;&#x6240;&#x6709;&#x5144;&#x5F1F;&#x5143;&#x7D20;F|</li>
<li>&#x4F8B;&#xFF1A;```<div class="father"><pre><code> &lt;div class=&quot;son1&quot;&gt;
     &lt;a href=&quot;#&quot;&gt;son1&lt;/a&gt;
     &lt;div class=&quot;grandson&quot;&gt;
         &lt;a href=&quot;#&quot;&gt;grandson&lt;/a&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 &lt;div class=&quot;son2&quot;&gt;son2&lt;/div&gt;
 &lt;div class=&quot;son3&quot;&gt;son3&lt;/div&gt;
</code></pre>&lt;/div&gt;```</div></li>
</ol>
<h3 id="&#x4E94;&#x3001;id-&#x53CA;-class-&#x9009;&#x62E9;&#x7B26;">&#x4E94;&#x3001;id &#x53CA; class &#x9009;&#x62E9;&#x7B26;</h3>
<p>5.id &#x53CA; class &#x9009;&#x62E9;&#x7B26;</p>
<pre><code>id &#x53CA; class &#x5747;&#x662F;css &#x63D0;&#x4F9B;&#x7531;&#x7528;&#x6237;&#x81EA;&#x5B9A;&#x4E49;&#x6807;&#x7B7E;&#x540D;&#x79F0;&#x7684;&#x9009;&#x62E9;&#x7B26;&#xFF0C;&#x7528;&#x6237;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x9009;&#x62E9;&#x7B26;id&#x53CA;class &#x6765;&#x5BF9;&#x9875;&#x9762;&#x4E2D;&#x7684;xhtml&#x6807;&#x7B7E;&#x8FDB;&#x884C;&#x81EA;&#x5B9A;&#x4E49;&#x540D;&#x79F0;&#xFF0C;&#x4ECE;&#x800C;&#x8FBE;&#x5230;&#x6269;&#x5C55;xhtml&#x6807;&#x7B7E;&#x53CA;&#x7EC4;&#x5408;html&#x6807;&#x7B7E;&#x7684;&#x76EE;&#x7684;&#x3002;
</code></pre><p>id &#x9009;&#x62E9;&#x5668;&#x53EF;&#x4EE5;&#x4E3A;&#x6807;&#x6709;&#x7279;&#x5B9A; id &#x7684; HTML &#x5143;&#x7D20;&#x6307;&#x5B9A;&#x7279;&#x5B9A;&#x7684;&#x6837;&#x5F0F;&#x3002;</p>
<p>id &#x9009;&#x62E9;&#x5668;&#x4EE5; &quot;#&quot; &#x6765;&#x5B9A;&#x4E49;&#x3002;</p>
<p>&#x4F8B;&#xFF1A; id &#x9009;&#x62E9;&#x7B26;</p>
<pre><code>    &lt;p id=&quot;p1&quot;&gt; &#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x6BB5;&#x843D; &lt;/p&gt;

    #p1 {
      font-size:12px;
      font-weight:bold;
    }
</code></pre><p>&#x4F8B;&#xFF1A; class &#x9009;&#x62E9;&#x7B26;</p>
<pre><code>    &lt;p class=&quot;p1&quot;&gt; &#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x6BB5;&#x843D; &lt;/p&gt;

    .p1 {
      font-size:12px;
      font-weight:bold;
    }
</code></pre><p>&#x5728;&#x7F51;&#x9875;&#x4E2D;&#xFF0C;&#x6BCF;&#x4E2A;id&#x540D;&#x79F0;&#x4E2D;&#x53EA;&#x80FD;&#x4F7F;&#x7528;&#x4E00;&#x6B21;&#xFF0C;&#x4E0D;&#x5F97;&#x91CD;&#x590D;&#x3002;</p>
<p>&#x4E0E;id &#x4E0D;&#x540C;&#xFF0C;class &#x5141;&#x8BB8;&#x91CD;&#x590D;&#x4F7F;&#x7528;&#x3002;&#x6BD4;&#x5982;&#x9875;&#x9762;&#x4E2D;&#x7684;&#x591A;&#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x90FD;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x540C;&#x4E00;&#x4E2A;&#x6837;&#x5F0F;&#x5B9A;&#x4E49;&#x3002;</p>
<p>&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x5B9A;&#x4E49;&#x591A;&#x4E2A;class&#xFF0C;&#x7528;&#x7A7A;&#x683C;&#x9694;&#x5F00;</p>
<h3 id="&#x516D;&#x3001;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x90E8;&#x5206;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;">&#x516D;&#x3001;&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x90E8;&#x5206;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;</h3>
<table>
<thead>
<tr>
<th>&#x9009;&#x62E9;&#x7B26;</th>
<th style="text-align:right">&#x7248;&#x672C;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td>E:link</td>
<td style="text-align:right">CSS1</td>
<td>&#x8BBE;&#x7F6E;&#x8D85;&#x94FE;&#x63A5;a&#x5728;&#x672A;&#x88AB;&#x8BBF;&#x95EE;&#x524D;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>E:visited</td>
<td style="text-align:right">CSS1</td>
<td>&#x8BBE;&#x7F6E;&#x8D85;&#x94FE;&#x63A5;a&#x5728;&#x5176;&#x94FE;&#x63A5;&#x5730;&#x5740;&#x5DF2;&#x88AB;&#x8BBF;&#x95EE;&#x8FC7;&#x65F6;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>E:hover</td>
<td style="text-align:right">CSS1/2</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x5728;&#x5176;&#x9F20;&#x6807;&#x60AC;&#x505C;&#x65F6;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>E:active</td>
<td style="text-align:right">CSS1/2</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x5728;&#x88AB;&#x7528;&#x6237;&#x6FC0;&#x6D3B;(&#x5728;&#x9F20;&#x6807;&#x70B9;&#x51FB;&#x4E0E;&#x91CA;&#x653E;&#x4E4B;&#x95F4;&#x53D1;&#x751F;&#x7684;&#x4E8B;&#x4EF6;)&#x65F6;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>E:focus</td>
<td style="text-align:right">CSS1/2</td>
<td>&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x5728;&#x6210;&#x4E3A;&#x8F93;&#x5165;&#x7126;&#x70B9;(&#x8BE5;&#x5143;&#x7D20;&#x7684;onfocus&#x4E8B;&#x4EF6;&#x53D1;&#x751F;)&#x65F6;&#x7684;&#x6837;&#x5F0F;&#x3002;</td>
</tr>
<tr>
<td>E:not(s)</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x4E0D;&#x542B;&#x6709;s&#x9009;&#x62E9;&#x7B26;&#x7684;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:first-child</td>
<td style="text-align:right">CSS2</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:last-child</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:only-child</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x4EC5;&#x6709;&#x7684;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-child(n)</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x7B2C;n&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-last-child(n)</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x7236;&#x5143;&#x7D20;&#x7684;&#x5012;&#x6570;&#x7B2C;n&#x4E2A;&#x5B50;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:first-of-type</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:last-of-type</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:only-of-type</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x552F;&#x4E00;&#x7684;&#x4E00;&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:nth-of-type(n)</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x7B2C;n&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E</td>
<td>&#x3002;</td>
</tr>
<tr>
<td>E:nth-last-of-type(n)</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x4E2D;&#x7684;&#x5012;&#x6570;&#x7B2C;n&#x4E2A;&#x540C;&#x7EA7;&#x5144;&#x5F1F;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:empty</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x5B50;&#x5143;&#x7D20;&#xFF08;&#x5305;&#x62EC;text&#x8282;&#x70B9;&#xFF09;&#x7684;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:checked</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x7528;&#x6237;&#x754C;&#x9762;&#x4E0A;&#x5904;&#x4E8E;&#x9009;&#x4E2D;&#x72B6;&#x6001;&#x7684;&#x5143;&#x7D20;E&#x3002;(&#x7528;&#x4E8E;input type&#x4E3A;radio&#x4E0E;checkbox&#x65F6;)</td>
</tr>
<tr>
<td>E:enabled    CSS3</td>
<td style="text-align:right">&#x5339;&#x914D;&#x7528;&#x6237;&#x754C;&#x9762;&#x4E0A;&#x5904;&#x4E8E;&#x53EF;&#x7528;&#x72B6;&#x6001;&#x7684;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:disabled</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x7528;&#x6237;&#x754C;&#x9762;&#x4E0A;&#x5904;&#x4E8E;&#x7981;&#x7528;&#x72B6;&#x6001;&#x7684;&#x5143;&#x7D20;E&#x3002;</td>
</tr>
<tr>
<td>E:target</td>
<td style="text-align:right">CSS3</td>
<td>&#x5339;&#x914D;&#x76F8;&#x5173;URL&#x6307;&#x5411;&#x7684;E&#x5143;&#x7D20;&#x3002;</td>
</tr>
</tbody>
</table>
<ol>
<li>&#x603B;&#x7ED3;&#xFF1A;<ol>
<li>&#x4F2A;&#x7C7B;&#x4E2D;child&#x7CFB;&#x5217;&#xFF1A;
&#x9009;&#x62E9;&#x5668;:&#x7B2C;&#x51E0;&#x4E2A;&#x513F;&#x5B50; nth&#x91CC;&#x9762;&#x7684;&#x62EC;&#x53F7;&#x8981;&#x4F20;&#x5165;&#x4ECE;1&#x5F00;&#x59CB;&#x7684;&#x503C;&#xFF0C;&#x53EF;&#x4EE5;&#x7ED3;&#x5408;&#x672A;&#x77E5;&#x6570;n&#x6765;&#x4F7F;&#x7528;</li>
<li>child :   &#x7B2C;n&#x4E2A;&#x513F;&#x5B50;&#x548C;&#x540C;&#x6837;&#x7684;&#x7C7B;&#x578B;&#x624D;&#x80FD;&#x5339;&#x914D;</li>
<li>type&#xFF1A;        &#x5339;&#x914D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x7B2C;n&#x4E2A;<h4 id="1&#x3001;&#x6211;&#x4EEC;&#x6765;&#x770B;&#x51E0;&#x4E2A;&#x4F8B;&#x5B50;">1&#x3001;&#x6211;&#x4EEC;&#x6765;&#x770B;&#x51E0;&#x4E2A;&#x4F8B;&#x5B50;:</h4>
<pre><code>&#x4F8B;1: html:&lt;input type=&quot;search&quot; name=&quot;search&quot;&gt;
css:input[type=&quot;search&quot;]:hover{background-color:greenyellow;}
  input[type=&quot;search&quot;]:focus{background-color:skyblue;}
  input[type=&quot;search&quot;]:active{background-color:yellow;}
</code></pre>&#x4F8B;2<code>:html:&lt;ul class=&quot;ul&quot;&gt;
&lt;li&gt;test1&lt;/li&gt;
&lt;li&gt;test2&lt;/li&gt;
&lt;li&gt;test3&lt;/li&gt;
&lt;li&gt;test4&lt;/li&gt;
&lt;li&gt;test5&lt;/li&gt;
&lt;/ul&gt;
css:.ul li:first-child{color:red;} /*&#x7B2C;&#x4E00;&#x4E2A;*/
.ul li:last-child{color:blue;} /*&#x6700;&#x540E;&#x4E00;&#x4E2A;*/
.ul li:nth-child(2){color:yellow;}/*&#x7B2C;&#x4E8C;&#x4E2A;*/
/*&#x5012;&#x6570;&#x7B2C;&#x4E8C;&#x4E2A;*/
.ul li:nth-last-child(2){color:yellow;}</code></li>
</ol>
</li>
</ol>
<pre><code class="lang-&#x4F8B;3:html&#xFF1A;">     <ul class="ul2">
            <li>test1</li>
            <li>test2</li>
            <li>test3</li>
            <li>test4</li>
            <li>test5</li>
            <li>test6</li>
     </ul>
  css:    (&#x4E58;&#x6CD5;&#x56E0;&#x5B50;n)                    
    /* &#x5947;&#x6570; */
    .ul2 li:nth-child(odd){background-color:#ccc;} 
     .ul2 li:nth-child(2n+1){border-left:2px solid red;}
   /* &#x5076;&#x6570; */
     .ul2 li:nth-child(even){background-color:#0F7CCF;}
     .ul2 li:nth-child(2n){border-left:2px solid black;}        
    /* 3&#x7684;&#x500D;&#x6570; */
     .ul2 li:nth-child(3n){color:red;font-weight:bold;}
</code></pre>
<p>&#x4F8B;4  ```:html:
  <input type="checkbox" name="love[]" id="book" value="book">
  <label for="book">&#x4E66;</label><br>
  <input type="checkbox" name="love[]" id="music" value="music">
  <label for="music">&#x97F3;&#x4E50;</label><br>
  <input type="checkbox" name="love[]" id="movie" value="movie">
  <label for="&#x201C;movie&#x201D;">&#x7535;&#x5F71;</label><br>
  css:
  input[name=&quot;love[]&quot;]:checked+label{color:blue;background-color:red;}
&#x5F53;&#x9009;&#x4E2D;&#x67D0;&#x4E00;&#x4E2A;&#x7231;&#x597D;&#xFF0C;&#x89E6;&#x53D1;&#x4E86;css&#x7684;&#x72B6;&#x6001;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x5229;&#x7528;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x7B26;&#x7ED9;&#x4E0B;&#x4E00;&#x4E2A;&#x6807;&#x7B7E;&#x6DFB;&#x52A0;&#x989C;&#x8272;</p>
<pre><code>```&#x4F8B;5:first-child &#x4E0E;first-of-type&#x7684;&#x533A;&#x522B;:
 html:
 &lt;div class=&quot;test&quot;&gt;
   &lt;!-- &lt;a href=&quot;#&quot;&gt;&#x6D4B;&#x8BD5;&lt;/a&gt; --&gt;
        &lt;p&gt;p&#x6807;&#x7B7E;&lt;/p&gt;
        &lt;a href=&quot;#&quot;&gt;a&#x6807;&#x7B7E;&lt;/a&gt;
        &lt;a href=&quot;#&quot;&gt;a&#x6807;&#x7B7E;&lt;/a&gt;
 &lt;/div&gt;
 css:/* a:first-child&#x662F;.test&#x4E0B;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x7ED3;&#x6784;&#x6807;&#x7B7E;&#xFF0C;&#x800C;&#x4E14;&#x662F;a&#x6807;&#x7B7E;&#xFF0C;&#x4E0D;&#x662F;&#x5219;&#x4E0D;&#x8D77;&#x6548;&#x679C; */
   .test a:first-child{color:red;}
/* a:first-of-type&#x4E0D;&#x9700;&#x8981;&#x662F;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#x53EA;&#x9700;&#x8981;.test&#x4E0B;&#x7684;a&#x6807;&#x7B7E;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5373;&#x53EF; */
    .test a:first-of-type{font-size:55px;}
</code></pre><h3 id="&#x4E03;&#x3001;&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;">&#x4E03;&#x3001;&#x5C5E;&#x6027;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x6269;&#x5C55;&#x5B66;&#x4E60;&#xFF09;</h3>
<h3 id="&#x516B;&#x3001;&#x4F2A;&#x5BF9;&#x8C61;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x6269;&#x5C55;&#x5B66;&#x4E60;">&#x516B;&#x3001;&#x4F2A;&#x5BF9;&#x8C61;&#x9009;&#x62E9;&#x7B26;&#xFF08;&#x6269;&#x5C55;&#x5B66;&#x4E60;</h3>
<h3 id="&#x4E5D;&#x3001;&#x9009;&#x62E9;&#x5668;&#x53C2;&#x8003;&#x624B;&#x518C;">&#x4E5D;&#x3001;&#x9009;&#x62E9;&#x5668;&#x53C2;&#x8003;&#x624B;&#x518C;</h3>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../CSS/CSS简介.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: CSS简介"><i class="fa fa-angle-left"></i></a>
        
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
